<template>
	<view class="notice"
		:style="{ background: bgColor, color: color, display: (direction == 'level' ? 'flex' : 'block'), fontSize: fontS }">
		<view class="head">
			<view class="img">
				<image src="https://bpy.noogka.com/icon/17.png">
				</image>
			</view>
			<view class="title">
				消息
			</view>
		</view>
		<view v-for="(item, index) in text" :key='index' class="rowup text"
			:style="{ transform: 'translate3d(' + x + '%,' + y + '%,10px)', height: (direction == 'level' ? '' : '80rpx') }">
			{{ item }}
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			x: 0,
			y: 0
		}
	},
	props: {
		text: {
			type: Array,
			default: () => {
				['请传入内容', '请传入内容']
			}
		},
		bgColor: {
			type: String,
			default: 'blue'
		},
		color: {
			type: String,
			default: '#fff'
		},
		direction: {
			type: String,
			default: 'level'
		},
		speed: {
			type: Number,
			default: .1
		},
		fontS: {
			type: Number,
			default: 30
		}
	},
	mounted() {
		// if(this.text.length){
		// 	this.startMove()
		// }
	},
	methods: {
		init(list) {
			if (list.length) {
				list.push(list[0])
				this.startMove()
			}
		},
		startMove() {
			let that = this;
			setInterval(function () {
				if (that.direction == 'level') {
					that.x -= that.speed
					if (that.x - 60 < (-(that.text.length - 1) * 100)) {
						that.x = 60
					}
				}
				if (that.direction == 'vertical') {
					that.y -= that.speed
					if (that.y < (-(that.text.length - 1) * 100)) {
						that.y = 0
					}
				}

			}, 2)
		}
	}
}
</script>

<style scoped lang=scss>
* {
	box-sizing: border-box;
}

.text {
	width: 100%;
	padding-left: 20rpx;
	padding-left: 160rpx;
	font-size: 14px;
}



.notice {
	padding: 20rpx 20rpx;
	max-height: 80rpx;
	overflow: hidden;
}

.head {
	display: flex;
	align-items: center;

	.img {
		width: 40rpx;
		height: 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.title {
		font-weight: 700;
		font-size: 14px;
		margin-left: 20rpx;
		border-right: 1px solid #F0F0F0;
		padding-right: 20rpx;
	}
}

.flex {
	display: flex;
}
</style>
